<template>
  <div class="container">
    <div ref="searchRef">
      <el-form :inline="true" :model="params" class="grids gridColumns6">
        <el-form-item label="年份">
          <DatePicker v-model="params.year" type="year"></DatePicker>
        </el-form-item>
        <el-form-item label="课程名称">
          <courseQuery v-model="params.curriculum_id"></courseQuery>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="params.name" placeholder="请输入姓名" @change="search" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="params.mobile" placeholder="请输入联系方式" @change="search" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="params.identityCard" placeholder="请输入身份证号" @change="search" />
        </el-form-item>
        <el-form-item label="毕业专业">
          <el-input v-model="params.graduationMajor" placeholder="请输入毕业专业" @change="search" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select collapse-tags collapse-tags-tooltip :max-collapse-tags="2" multiple clearable v-model="params.status" placeholder="请选择订单状态" @change='search'>
            <el-option v-for="(item,index) in tabs" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="params.out_trade_no" :placeholder="`请输入订单号`" @change="search" />
        </el-form-item>
        <el-form-item label="所在企业名称">
          <el-input v-model="params.enterprise" :placeholder="`请输入所在企业名称`" @change="search" />
        </el-form-item>
        <el-form-item label="累计工作年限">
          <el-input v-model="params.workYears" :placeholder="`请输入累计工作年限`" @change="search" />
        </el-form-item>
        <el-form-item>
          <el-dropdown>
            <el-button type="primary">操作</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="search">查询</el-dropdown-item>
                <el-dropdown-item @click="delBatch" :disabled="!selectData.length">批量删除</el-dropdown-item>
                <el-dropdown-item @click="exportExcel" :disabled="!selectData.length">导出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-button @click="init" style="margin-left: 10px;">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :max-height="tableHeight" :data="tableData.rows" v-loading="loading" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="报名时间" width="160">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row._add_time,"all")}}
        </template>
      </el-table-column>
      <el-table-column prop="approvalContent.model.name" label="姓名" width="70" show-overflow-tooltip>
        <template #default="scope">
          <div class="button" @click="proxy.$refs.registrationDetailsRef.open(scope.row)">{{scope.row.approvalContent.model.name}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="approvalContent.model.mobile" label="联系方式" width="120" />
      <el-table-column prop="curriculum_Info.name" label="课程名称" width="360" show-overflow-tooltip />
      <el-table-column prop="approvalContent.model.identityCard" label="身份证号" width="179" />
      <el-table-column prop="approvalContent.model.graduationMajor" label="所在企业名称" width="200" show-overflow-tooltip>
        <template #default="scope">
          {{counter.showEnterprise(scope.row.approvalContent.model,"enterprise")}}
        </template>
      </el-table-column>
      <el-table-column prop="approvalContent.model.employed_Status" label="就业状态" align="center" width="80" show-overflow-tooltip>
        <template #default="scope">
          {{scope.row.approvalContent.model.employed_Status||'-'}}
        </template>
      </el-table-column>
      <el-table-column prop="approvalContent.model.workYears" label="累计工作年限" width="110" />
      <el-table-column label="最高学历" width="165" prop="approvalContent.model.education" />
      <el-table-column prop="approvalContent.model.graduationMajor" label="毕业专业" width="180" />
      <el-table-column prop="out_trade_no" label="订单号" width="150" />
      <el-table-column prop="price" label="课程价格">
        <template #default="scope">
          {{proxy.$utils.formatNumber(scope.row.price)}}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="报名状态" width="100" align="center" fixed="right">
        <template #default="scope">
          <el-tag type="danger">{{scope.row.status==0?'未支付':'订单取消'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作" width="180" align="center" fixed="right">
        <template #default="scope">
          <el-button type="primary" text size="small" @click="handleClick(scope.row,1)">编辑</el-button>
          <el-button type="primary" text size="small" @click="handleClick(scope.row,2)">修改订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="params.pageIndex" v-model:limit="params.pageSize" @pagination="getInfo" />

    <registrationDetails ref="registrationDetailsRef" @fatherMethod="getInfo"></registrationDetails>

    <editOrderInfo ref="editOrderInfoRef" @fatherMethod="getInfo"></editOrderInfo>
  </div>
</template>

<script setup lang="ts">
import editOrderInfo from "@/views/order/components/editOrderInfo.vue";
import registrationDetails from "@/views/order/components/registrationDetails.vue";
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let tableData = ref([]);
let params = ref({
  pageIndex: 1,
  pageSize: 50,
  year: proxy.$utils.dateTimeFormateFn(Date.now(), "year"),
  type: "",
  curriculum_id: "",
  out_trade_no: "",
  status: "",
  name: "",
  mobile: "",
});
let types = ref([]);
let selectData = ref([]); //选中的数据
let loading = ref(false);
let searchHeight = ref(0);

let tabs = ref([
  { name: "全部", value: "" },
  { name: "未支付", value: 0 },
  { name: "订单取消", value: 6 },
]);

let tableHeight = computed(() => {
  let hei =
    window.innerHeight - 84 - counter.pageHeight - 55 - searchHeight.value;
  return `${hei}px`;
});

onMounted(() => {
  getInfo();
  // getTypes();
  searchHeight.value = proxy.$refs.searchRef.offsetHeight;
});

function handleSelectionChange(e) {
  selectData.value = e;
}

async function handleClick(row, num) {
  switch (num) {
    case 1: //编辑
      let result = await proxy.$apis.course({
        type: "details",
        data: { _id: row.curriculum_id },
      });
      proxy.$refs.editOrderInfoRef.open(result, row.approvalContent, {
        orderId: row._id,
        userId: row.userId,
      });
      break;
    case 2: //修改订单金额
      proxy.$refs.registrationDetailsRef.open(row, 1);
      break;
    default:
      break;
  }
}

async function delBatch() {
  let resp = await proxy.$utils.confirmTips("确认删除选中订单?");
  if (!resp) return;
  let list = proxy.$utils.deepcopy(selectData.value);
  for (let index = 0; index < list.length; index++) {
    const element = list[index];
    await proxy.$apis.orderAction({
      type: "del",
      data: { _id: element._id },
    });
  }
  proxy.$utils.showToast("删除成功");
  getInfo();
}

function init() {
  params.value = {
    pageIndex: 1,
    pageSize: 50,
    year: proxy.$utils.dateTimeFormateFn(Date.now(), "year"),
    type: "",
    curriculum_id: "",
    out_trade_no: "",
    status: "",
  };
  getInfo();
}

function search() {
  params.value.pageIndex = 1;
  getInfo();
}

async function getTypes() {
  types.value = await proxy.$apis.webCurriculum({
    type: "query",
  });
}

async function getInfo() {
  try {
    loading.value = true;
    tableData.value = await proxy.$apis.orderAction({
      type: "intendedCustomers",
      data: params.value,
    });
    console.log("列表", tableData.value);
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

async function exportExcel() {
  let obj = { ...params.value };
  delete obj.pageIndex;
  delete obj.pageSize;
  let resp = await proxy.$apis.orderAction({
    type: "intendedCustomersExport",
    data: obj,
  });
  let arr = [];
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    arr.push({
      报名时间: proxy.$utils.dateTimeFormateFn(element._add_time, "all"),
      //培训分类:,
      课程名称: await courseDetails(element.curriculum_id, "name"),
      报名所属: element.approvalContent.model.affiliation || "-",
      姓名: element.approvalContent.model.name,
      联系方式: element.approvalContent.model.mobile,
      身份证号: element.approvalContent.model.identityCard,
      毕业专业: element.approvalContent.model.graduationMajor,
      累计工作年限: element.approvalContent.model.workYears,
      订单号: element.out_trade_no,
      课程价格: element.price,
      报名状态: element.status == 0 ? "未支付" : "订单取消",
    });
  }
  let cols = []; //设置表头样式
  for (let index = 0; index < 11; index++) {
    cols.push({ wch: 20 });
  }
  let query = {
    jsonData: arr,
    cols,
  };
  await proxy.$utils.exportToExcel(query, "意向列表导出");
}

async function courseDetails(curriculum_id, fileName) {
  let result = await proxy.$apis.course({
    type: "details",
    data: { _id: curriculum_id },
  });
  return result[fileName];
}

watch(
  () => [
    params.value.year,
    params.value.type,
    params.value.curriculum_id,
    params.value.affiliation,
    params.value.out_trade_no,
    params.value.status,
  ],
  (newValue, oldValue) => {
    if (newValue) search();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
  margin: 20px;
  .el-table {
    margin-top: 20px;
  }
}
</style>



